<def name="icons" value="/FabWeb/modules/AdminSchemas/EditSchema/images" />
<div id="SchemaEditor">
/*    <h1>Editeur de schéma : $file</h1> */
    
    /*
        Arborescence de gauche : liste les noeuds du schéma.
    */
    <div id="schema">
        <ul style="display: none"> /* évite de voir apparaître l'arbre non stylisé */
            <li id="root" rel="Schema" 
                data-properties="{$this->nodeProperties($schema)}">
                <a>Schéma $file</a>
                <ul>
                    /* Liste des champs */
                    <li id="fields" rel="Fields">
                        <a>Liste des champs</a>
                        <ul>
                            <loop on="{$schema->fields}" as="$field">
                                /* Groupe de champs */
                                <if test="{$field->has('fields')}">
                                    <li rel="Group" data-properties="{$this->nodeProperties($field)}">
                                        <a>{$field->name}</a>
                                        <ul>
                                            <loop on="{$field->fields}" as="$field">
                                                <li rel="Field" data-properties="{$this->nodeProperties($field)}">
                                                    <a>{$field->name}</a>
                                                </li>
                                            </loop>
                                        </ul>
                                    </li>
                                </if>
                                
                                /* Champ simple */
                                <else>
                                    <li rel="Field" data-properties="{$this->nodeProperties($field)}">
                                        <a>{$field->name}</a>
                                    </li>
                                </else>
                            </loop>
                        </ul>
                    </li>

                    /* Liste des index */
                    <li id="indices" rel="Indices">
                        <a>Liste des index</a>
                        <ul>
                            <loop on="{$schema->indices}" as="$index">
                                <li rel="Index" data-properties="{$this->nodeProperties($index)}">
                                    <a>{$index->name}</a>
                                </li>
                            </loop>
                        </ul>
                    </li>
                    
                    /* Liste des alias */
                    <li id="aliases" rel="Aliases">
                        <a>Liste des alias</a>
                        <ul>
                            <loop on="{$schema->aliases}" as="$alias">
                                <li rel="Alias" data-properties="{$this->nodeProperties($alias)}">
                                    <a>{$alias->name}</a>
                                </li>
                            </loop>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
    /*
        Editeur de propriétés : affiche les propriétés du noeud sélectionné.
    */
    <form id="form" class="form">
        <p id="form-title"></p>
        <table><thead><tr><th>Nom</th><th>Valeur</th></tr></thead><tbody></tbody></table>
        <div id="schema-toolbar"></div>
    </form>
    
    /*
        Formulaire (caché) utilisé pour enregistrer le schéma : le code javascript sérialize 
        le schéma en JSON, le stocke dans la textarea puis soumet le formulaire.
    */
    <form id="saveform" method="post" action="SaveSchema" style="display: none">
        <hidden name="file" value="$file" />
        <textarea name="schema"></textarea>
    </form> 
</div>

<script type="text/javascript">
    jQuery(document).ready(function() \{
         jQuery('#schema').schemaEditor({json_encode($config)});
    \});    
</script>